{# This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/. #}

{% raw %}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>{{ pres.title }}</title>
        <style>
            body {
                display: flex;
                width: 100vw;
                height: 100vh;
                margin: 0;
                padding: 0;
            }

            iframe {
                border: none;
            }

            .sozi-frame-preview {
                display: flex;
                flex-direction: column;
                resize: horizontal;
                overflow: hidden;
                width: 50vw;
                padding: 0.5rem 0;
                box-shadow: 5px 0px 5px rgb(150,150,150);
                z-index: 1;
            }

            .sozi-current-frame-container {
                height: 50%;
                margin-bottom: 0.5rem;
                resize: vertical;
                overflow: hidden;
            }

            .sozi-current-frame {
                width: 100%;
                height: 100%;
            }

            .sozi-frame-previews-prev-next {
                display: flex;
                flex: auto;
            }

            .sozi-previous-frame, .sozi-next-frame {
                margin-right: 0.5rem;
                width: 50%;
            }

            .sozi-controls {
                text-align: center;
                margin-bottom: 0.5rem;
            }

            .sozi-controls input {
                font-size: 150%;
                font-family: sans-serif;
            }

            .sozi-notes {
                flex: auto;
                padding: 0.5rem 1rem;
                background: rgb(245, 245, 245);
            }

            .sozi-current-index {
                margin: 0 0.5rem 0 1rem;
            }

            .sozi-presentation-length {
                margin: 0 1rem 0 0.5rem;
            }
        </style>
    </head>
    <body>
        <div class="sozi-frame-preview">
            <div class="sozi-current-frame-container">
                <iframe class="sozi-current-frame" src="{{ soziHtml }}"></iframe>
            </div>
            <div class="sozi-controls">
                <input type="button" id="sozi-previous-btn" value="&laquo;" title="Previous">
                <span class="sozi-current-index"></span>/<span class="sozi-presentation-length"></span>
                <input type="button" id="sozi-next-btn" value="&raquo;" title="Next">
            </div>
            <div class="sozi-frame-previews-prev-next">
                <iframe class="sozi-previous-frame" src="{{ soziHtml }}"></iframe>
                <iframe class="sozi-next-frame"     src="{{ soziHtml }}"></iframe>
            </div>
        </div>
        <div class="sozi-notes">
            <h1 class="sozi-notes-title"></h1>
            <div class="sozi-notes-body"></div>
        </div>
{% endraw %}
        <script>{{'{% raw %}'}}{{ js|safe }}{{'{% endraw %}'}}</script>
    </body>
</html>
